<template>
    <div class="page-container">
        <Example title="基本用法">
            <a-space>
                <a-icon type="step-backward" />
                <a-icon type="question" />
                <a-icon type="edit" />
                <a-icon type="area-chart" />
                <a-icon type="android" />
            </a-space>
        </Example>

        <Example title="自定义图标">
            <a-space>
                <CustomIcon component="HeartSvg" :style="{ color: 'hotpink' }" />
                <CustomIcon component="PandaSvg" :style="{ fontSize: '32px' }" />
            </a-space>
        </Example>

        <Example title="inconfont">
            <a-space>
                <icon-font type="icon-tuichu" />
                <icon-font type="icon-facebook" />
                <icon-font type="icon-twitter" />
            </a-space>
        </Example>

        <Example title="多色图标">
            <a-space>
                <a-icon type="smile" theme="twoTone" />
                <a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" />
                <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" />
            </a-space>
        </Example>
    </div>
</template>

<script>
import CustomIcon from "../../components/CustomIcon";
import { Icon } from 'ant-design-vue';

const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
});
export default {
    components: {
        IconFont,
        CustomIcon
    }
};
</script>

<style>

</style>
